<template>
  <div class="common_nav">
    <div class="title">
      <div class="main">{{ title }}</div> &nbsp;
      <div class="child" v-if="childTitle"> - {{ childTitle }}</div>
    </div>
    <div class="back" v-if="backTitle && appPathObj">
      <el-button type="danger" size="medium" :icon="icon" round @click="appToPath()" plain>{{ backTitle }}</el-button>
    </div>
    <div class="back" v-if="typeof routerPath.path != 'undefined'">
      <router-link :to="routerPath">
        <el-button type="danger" size="medium" round plain>返回</el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "common_nav",
  props: {
    title: {
      type: String,
      default: '',
    },
    childTitle: {
      type: String,
      default: '',
    },
    backTitle: {
      type: String,
      default: '',
    },
    appPathObj: {
      type: Object,
      default: {}
    },
    routerPath: {
      type: Object,
      default: {}
    },
    icon: {
      type: String,
      default: '',
    }
  },
  methods: {
    appToPath(){
      if (typeof this.appPathObj.type != 'undefined' && this.appPathObj.type=='emit') {
        this.$emit('event', this.appPathObj.param)
      } else {
        this.appToLink(this.appPathObj.common_path, this.appPathObj.query)
      }
    }
  }
}
</script>

<style scoped>

</style>